<template>
  <div class="rule-container">
    <div class="create-container">
      <el-button type="primary" @click="open">增加停车计费规则</el-button>
      <el-button @click="exportExcel">导出Excel</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="ruleList" style="width: 100%" :index="indexMethod">
        <el-table-column type="index" label="序号" />
        <el-table-column label="计费规则编号" prop="ruleNumber" />
        <el-table-column label="计费规则名称" prop="ruleName" />
        <el-table-column label="免费时长(分钟)" prop="freeDuration" />
        <el-table-column label="收费上线(元)" prop="chargeCeiling" />
        <el-table-column label="计费方式">
          <template #default="scope">
            {{ scope.row.chargeType }}
          </template>
        </el-table-column>
        <el-table-column label="计费规则" prop="ruleNameView"/>
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="scope">
            <el-button size="mini" type="text">编辑</el-button>
            <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-container">
      <!-- @size-change="handleSizeChange"：当页数变化的时候会触发该方法 -->
      <!-- @current-change="handleCurrentChange"：当前页变化的时候会触发该方法 -->
      <!-- :current-page="currentPage4"：表示当前页 -->
      <!-- :page-sizes="[100, 200, 300, 400]":设置每页的容量 -->
      <!-- :page-size="100":每一页的数据 -->
      <!-- layout="total, sizes, prev, pager, next, jumper":显示分页组件的功能 -->
      <!-- :total="400":显示总共有多少条数据 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[2, 4, 6]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    </div>
<addRule :dialogvisible="dialogVisible" ></addRule>
  </div>
</template>

<script>
import addRule from './components/addRule.vue'
import { getRuleListAPI,delRuleAPI} from '@/api/rule';
import { utils, writeFileXLSX } from 'xlsx'
//utils工具：用来创建工作薄和工作表
//writeFileXLSX：用来形成excel以提供下载
export default {
  name: 'Building',
  data() {
    return {
      ruleList: [],
      params: {
        page: 1,
        pageSize: 2
      },
      total: 0,
      dialogVisible: false
    }
  },
  created(){
    //钩子函数
    this.getRuleList()
  },
  components:{
    addRule
  },

  methods:{
    open(){
      this.dialogVisible=true
    },

    formType(type){
      const map={
        "duration":"按时长计费",
        "partition":"按时段计费",
        "turn":"按次数计费"
      }
      return map[type]
    },
    handleSizeChange(val){
      this.params.pageSize=val
      this.getRuleList()
    },
    handleCurrentChange(val){
      this.params.page=val
      this.getRuleList()
    },
    async getRuleList(){
      const res=await getRuleListAPI(this.params)
      // console.log(res)
      this.ruleList=res.data.rows
      this.total=res.data.total
      console.log(this.ruleList)
    },
    del(id){
      this.$confirm('是否确定删除当前计费规则？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
        await delRuleAPI(id)

          this.$message({
            type: 'success',
            message: '计费规则已删除',
          });

        }).catch(() => {
          return
        });
    },
    addRent(id){
      this.dialogVisible=true
      this.rentForm.enterpriseId=id
    },
    indexMethod(index){
      return (this.params.page-1)*this.params.pageSize+index+1
    },
    exportExcel(){
      // 创建一个新的工作簿
  const workbook = utils.book_new()
  const tableKeys=["ruleNumber","ruleName","freeDuration","chargeCeiling"]
  const tableHeaderName=["计费规则编号","计费规则名称","免费时长(分钟)","收费上线(元)"]
  const sheetData=this.ruleList.map(item=>{
    // console.log(item)
    const newobj={}
    tableKeys.forEach(key=>{
      if(key=="chargeType"){
        newobj[key]=this.formType(item[key])
      }else{
        newobj[key]=item[key]
      }

    })
    return newobj
  })
  console.log(sheetData)

  // 创建一个工作表 要求一个对象数组格式
  const worksheet = utils.json_to_sheet(
    // [
    //   { name: '张三', age: 18 },
    //   { name: '李四', age: 28 }
    // ]
    sheetData
  )

  // 把工作表添加到工作簿  Data为工作表名称
  utils.book_append_sheet(workbook, worksheet, 'Data')
  // 改写表头
  utils.sheet_add_aoa(worksheet, [tableHeaderName], { origin: 'A1' })
  // 导出方法进行导出
  writeFileXLSX(workbook, 'SheetJSVueAoO.xlsx')
    }
  }
}
</script>

<style lang="scss" scoped>
.rule-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
